<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="bootstrap-3.3.7/dist/css/bootstrap.css">
    <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
    <script>
        $(function () {

            var init = function (dom) {
                dom.removeClass("has-success");
                dom.removeClass("has-error");
                var span = dom.find(".form-control-feedback");
                var span2 = dom.find(".help-block");
                span.remove();
                span2.remove();
            }
            var btn = $(".btn");
            btn.on("click", function (e) {
                console.log(123);
                e.preventDefault(); //阻止默认事件
                var username = $("#username");
                var usernameP = username.parent();
                var password = $("#password");
                var passwordP = password.parent();
                var password1 = $("#password1");
                var passwordP1 = password1.parent();
                init(usernameP); init(passwordP); init(passwordP1)
                if (username.val().length >= 6 && password.val().length >= 12) {
                    usernameP.addClass("has-success");
                    var tick = '<span class="glyphicon glyphicon-ok form-control-feedback"></span>';
                    usernameP.append($(tick));
                    var help = '<span class="help-block">输入用户名正确</span>';
                    usernameP.append($(help));

                    passwordP.addClass("has-success");
                    var tick1 = '<span class="glyphicon glyphicon-ok form-control-feedback"></span>';
                    passwordP.append($(tick1));
                    var help2 = '<span class="help-block">输入密码正确</span>';
                    passwordP.append($(help2));

                    if (password1.val() && password.val() === password1.val()) {
                        passwordP1.addClass("has-success");
                        var tick1 = '<span class="glyphicon glyphicon-ok form-control-feedback"></span>';
                        passwordP1.append($(tick1));
                        var help2 = '<span class="help-block">确认密码正确</span>';
                        passwordP1.append($(help2));
                    } else if (password1.val() != "") {
                        passwordP1.addClass("has-error");
                        var error = '<span class="glyphicon glyphicon-remove form-control-feedback"></span>';
                        passwordP1.append($(error));
                        var help = '<span class="help-block">两次密码不一致</span>';
                        passwordP1.append($(help));
                    }
                    else {
                        passwordP.addClass("has-error");
                        var error = '<span class="glyphicon glyphicon-remove form-control-feedback"></span>';
                        passwordP1.append($(error));
                        var help = '<span class="help-block">确认密码不为空</span>';
                        passwordP1.append($(help));
                    }


                } else if (username.val() != "" && password.val() != "") {
                    usernameP.addClass("has-error");
                    var tick = '<span class="glyphicon glyphicon-remove form-control-feedback"></span>';
                    usernameP.append($(tick));
                    var help = '<span class="help-block">输入的用户名少于6个字母</span>';
                    usernameP.append($(help));

                    passwordP.addClass("has-error");
                    var tick1 = '<span class="glyphicon glyphicon-remove form-control-feedback"></span>';
                    passwordP.append($(tick1));
                    var help = '<span class="help-block">输入的密码少于12个字母</span>';
                    passwordP.append($(help));
                } else {
                    usernameP.addClass("has-error");
                    var error = '<span class="glyphicon glyphicon-remove form-control-feedback"></span>';
                    usernameP.append($(error));
                    var help = '<span class="help-block">输入用户名为空</span>';
                    usernameP.append($(help));

                    passwordP.addClass("has-error");
                    var error1 = '<span class="glyphicon glyphicon-remove form-control-feedback"></span>';
                    passwordP.append($(error1));
                    var help1 = '<span class="help-block">输入密码为空</span>';
                    passwordP.append($(help1));
                }
            })
        })
    </script>
    <style>
        form {
            width: 300px;
            margin: 10px auto;
        }
    </style>
    <title>Document</title>
</head>

<body>
    <form>
        <div class="form-group has-feedback">
            <label for="username">用户名</label>
            <input class="form-control" type="text" id="username"></input>
            <!--<span class="glyphicon glyphicon-ok form-control-feedback"></span>-->
        </div>
        <div class="form-group has-feedback">
            <label for="password">密码</label>
            <input class="form-control" type="text" id="password"></input>
        </div>
        <div class="form-group has-feedback">
            <label for="password1">确认密码</label>
            <input class="form-control" type="text" id="password1"></input>
        </div>
        <button class="btn btn-primary">登录</button>
    </form>
</body>

</html>